<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/4/7 0007
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
          type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"
            type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
            type="text/javascript"></script>
    <!-- 引入自定义css文件 style.css -->
</head>
<body>

<input type="text" id="in">
<div class="form-group">
    验证码：<input id="authCode" name="authCode" type="text"/>
    <!--这里img标签的src属性的值为后台实现图片验证码方法的请求地址-->
    <label><img type="image" src="/authCode.do" id="codeImage" onclick="chageCode()"
                title="图片看不清？点击重新得到验证码" style="cursor:pointer;"/></label>
    <label><a onclick="chageCode()">换一张</a></label>
    <br>
    <a href="javascript:void (0)" onclick="validateCode()">提交</a>
</div>
</body>
<script>
    $("#in").focus(function () {
        $("#in").val("");
    })

    function chageCode() {
        $('#codeImage').attr('src', 'authCode.do?abc=' + Math.random());//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
    }

    function validateCode() {
        $.ajax(
            {
                url: "validate.do",
                data: {
                    value: $("#authCode").val()
                },
                success: function (res) {
                    if (res == 1) {
                        alert("验证成功");
                    } else {
                        alert("验证失败");
                        //刷新验证码图片
                        $("#codeImage").trigger("click");
                    }
                }
            }
        )
    }

    $("#authCode").blur(function () {
        validateCode()
    })
</script>
</html>
